<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Clip</title>
    <style type="text/css">
        #canvas{
            border: 1px solid cornflowerblue;
            position: absolute;
            left: 150px;
            top: 10px;
            background: #eee;
            border: thin solid #aaa;
            cursor:pointer;
            box-shadow: rgba(200, 200, 255, .9) 5px 5px 10px;
        }
    </style>
</head>
<body>
    <select id="compositingSelect" size="11">
        <option value="source-atop">source-atop</option>
        <option value="source-in">source-in</option>
        <option value="source-out">source-out</option>
        <option value="source-over">source-overp</option>
        <option value="destination-atop">destination-atop</option>
        <option value="destination-in">destination-in</option>
        <option value="destination-out">destination-out</option>
        <option value="destination-over">destination-over</option>
        <option value="lighter">lighter</option>
        <option value="copy">copy</option>
        <option value="xor">xor</option>
    </select>

    <canvas id="canvas" width=1600 height=800>
        Canvas not supported
    </canvas>

    <script type="text/javascript">
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            selectElement = document.getElementById("compositingSelect");

        function drawText(){
            context.save();
            context.shadowColor = "rgba(100,100,150,.8)";
            context.shadowOffsetX = 5;
            context.shadowOffsetY = 5;
            context.shadowBlur = 10;
            context.fillStyle = "cornflowerblue";
            context.fillText("HTML5", 100, 250);
            context.strokeStyle = "yellow";
            context.strokeText("HTmL5", 100, 250);
            context.restore();
        }

        function windowToCanvas(e){
            var bbox = canvas.getBoundingClientRect();
            return {
                x:e.clientX - bbox.left*(canvas.width/bbox.width),
                y:e.clientY - bbox.top*(canvas.height/canvas.height)
            }
        }

        canvas.onmousemove = function(e){
            var loc = windowToCanvas(e);
            context.clearRect(0,0,canvas.width,canvas.height);

            drawText();
            context.save();
            context.globalCompositeOperation = compositingSelect.value;
            context.beginPath();
            context.arc(loc.x, loc.y, 100, 0, Math.PI*2, false);
            context.fillStyle = "orange";
            context.stroke();
            context.fill();
            context.restore();
        }

        selectElement.selectedIndex = 3;
        context.lineWidth = .5;
        context.font = "300px Comic-sans";
        drawText();
    </script>

</body>
</html>